<template>
  <div>
    <el-container>
      <el-main>
        <el-container class="parent-body">
          <el-header class="content-header">
            <div>
              <i class="el-icon-s-fold"></i> 数据列表
            </div>
            <div>
                  <el-button @click.native="returnPage()">返回上一级</el-button>
              <el-button @click.native="add">添加</el-button>
            </div>
          </el-header>
          <el-main class="info-main padding-style">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="categoryId" label="编号" width="80"></el-table-column>
              <el-table-column prop="categoryName" label="分类名称" width="80"></el-table-column>
              <el-table-column prop="categoryLevel" label="级别"></el-table-column>
              <el-table-column label="商品数量">
                <template slot-scope="scope">
                  <a href="javascript:;" @click="goodList">{{scope.row.categoryId}}</a>
                </template>
              </el-table-column>
              <el-table-column label="数量单位">件</el-table-column>
              <el-table-column prop label="导航栏" width="100">
                <template slot-scope="scope">
                  <el-switch
                    :active-value="1"
                    :inactive-value="0"
                    v-model="scope.row.categoryIsNavigation"
                  ></el-switch>
                </template>
              </el-table-column>
              <el-table-column label="是否显示" width="100">
                <template slot-scope="scope">
                  <el-switch
                    :active-value="1"
                    :inactive-value="0"
                    v-model="scope.row.categoryIsShow"
                  ></el-switch>
                </template>
              </el-table-column>
              <el-table-column prop="categorySort" label="排序"></el-table-column>
              <el-table-column label="设置" width="300">
                <template slot-scope="scope">
                  <el-button size="mini" @click="addLowerLevel(scope.$index, scope.row)">新增下级</el-button>
                  <el-button size="mini" @click="selectLowerLevel(scope.$index, scope.row)">查看下级</el-button>
                  <el-button size="mini" @click="transferGoods(scope.$index, scope.row)">转移商品</el-button>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="160">
                <template slot-scope="scope">
                  <el-button size="mini" @click="updateOne(scope.$index, scope.row)">编辑</el-button>
                  <el-button size="mini" @click="deleteOne(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-main>
          <el-footer class="info-foot">
            <div class="paging-style">
                <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
            </div>
          </el-footer>
        </el-container>
      </el-main>
    </el-container>

    <el-dialog title="转移商品" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form
        ref="goodTransferClassification"
        :model="goodTransferClassification"
        label-width="120px"
      >
        <el-form-item label="原商品分类：">
          <el-select v-model="goodTransferClassification.oldGood" placeholder="请选择商品分类"></el-select>
        </el-form-item>
        <el-form-item label="目标商品分类：">
          <el-select v-model="goodTransferClassification.newGood" placeholder="请选择商品分类">
            <el-option
              v-for="item in options"
              :key="item.categoryName"
              :label="item.categoryName"
              :value="item.categoryName"
            ></el-option>
          </el-select>
        </el-form-item>
        <span class="dialog-footer" style="text-align: right;display: inline-block;width:100%;">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">开始转移</el-button>
        </span>
      </el-form>
    </el-dialog>


  </div>
</template>

<script>
import classifyApi from "@/api/goods/classify";
export default {
  data() {
    return {
      // 级别
      Level:1,
      // 
      multipleSelection: [],
      pageSize: 2,
      pageSizes: [2, 3, 4, 5, 10, 25, 50, 100],
      total: 4,
      currentPage1: 1,
      dialogVisible: false,
      // 分页使用
      categoryParentId:0,
      goodTransferClassification: [
        {
          categoryId: "",
          oldGood: "",
          newGood: ""
        }
      ],
      tableData: [],
      options: [],
      tableform: {
        categoryId: "",
        categoryLevel: "",
        categoryParentId: ""
      },
   
    };
  },
  // created() {
  //   this.intdata();
  // },
  methods: {
    addLowerLevel(index, row) {
      this.$router.push({
        path: "/goods/classifyForm",
        query: { categoryParentId: row.categoryId }
      });
    },
    // 查看下级
    selectLowerLevel(index, row) {
      console.log(row.categoryId);
      this.currentPage1 = 1;
      this.categoryParentId=row.categoryId;
        this.Level=row.categoryLevel;
      this.intdata(this.currentPage1, this.pageSize,this.categoryParentId);
  
    },

    // 原商品分类aa
    removeClass(categoryId) {
      classifyApi.getCategoryName(categoryId).then(response => {
        console.log(response);
        this.goodTransferClassification.oldGood =
          response.data.data
      });
    },
    // 获取全部分类
    classAll() {
      classifyApi.getCategoryAll().then(response => {
        console.log(response.data.data);
        this.options = response.data.data;
      });
    },

    transferGoods(index, row) {
      this.dialogVisible = true;
      
      this.goodTransferClassification.categoryId = row.categoryId;
     
     console.log(this.goodTransferClassification.newGood);
     if(row.categoryParentId==0){
this.goodTransferClassification.oldGood ="是最高级"
     }else{
this.removeClass(row.categoryParentId);
     }
      
      this.classAll();
    },
    updateOne(index, row) {
      this.$router.push({
        path: "/goods/classformUpdate",
        query: { categoryId: row.categoryId }
      });
    },
    deleteOne(index, row) {
      this.$confirm("确认删除这条记录吗？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消"
      }).then(()=>{
 console.log("确认");
 console.log(row.categoryId);
 classifyApi.deleteList(row.categoryId).then(response => {
          console.log(response.data);
           this.$message(response.data.msg);
           this.intdata(this.currentPage1, this.pageSize, this.categoryParentId);

        });

      }).catch(()=>{
         console.log("取消");
      })
     
    },

     // 当每页显示条数改变后,被触发 , val是最新的每页显示条数
    handleSizeChange(val) {
      this.pageSize = val;
       this.intdata(this.currentPage1, this.pageSize, this.categoryParentId);
    },
    // 当页码改变后,被触发 , val 是最新的页面
    handleCurrentChange(val) {
      this.currentPage1 = val;
      this.intdata(this.currentPage1, this.pageSize, this.categoryParentId);
    },
    
    returnPage(){
      this.currentPage1=1;
       this.pageSize=2;
      //  this.total=0;
       console.log("当前要返回的级别为:"+this.Level);
       
if(this.Level>0){
 
classifyApi.getListByLevelPage(this.currentPage1,this.pageSize,this.Level).then(response=>{
console.log(response);
 this.tableData = response.data.data.list;
          this.total = response.data.data.total;
          this.categoryParentId=response.data.data.list[0].categoryParentId;
this.Level=this.Level-1;
if(this.Level==0){
  this.Level=1;
};
});

}else{this.$message("级别出现问题,请检查")}


    },

    add() {
      this.$router.replace({ path: "/goods/classFormTwo" });
    },
    handleClose(done) {
      done();
    },
    goodList() {
      this.$router.replace({ path: "/goods/goodsList" });
    },
    onSubmit() {
      if (this.goodTransferClassification.oldGood == "") {
        this.$message({
          type: "warning",
          message: "请选择原商品分类！"
        });
        return;
      }
      if (this.goodTransferClassification.newGood == "") {
        this.$message({
          type: "warning",
          message: "请选择目标商品分类！"
        });
        return;
      }

        this.$message("正在提交中...");
      var categoryName = this.goodTransferClassification.newGood;
      classifyApi.getCategoryValue(categoryName).then(response => {
        console.log(response.data.data);

        this.tableform.categoryId = this.goodTransferClassification.categoryId;
        this.tableform.categoryLevel = response.data.data.categoryLevel + 1;
        this.tableform.categoryParentId = response.data.data.categoryId;
        console.log(this.tableform);
        classifyApi.updateParentId(this.tableform).then(response => {
          console.log(response);
            this.$message(response.data.msg);
            //  this.$router.push({path: "/goods/goodsClassify"});
            this.$router.go(0); 
          // this.tableData = response.data.data;
        });
      });
    },

    // 返回数据
    intdata(pageNum, pageSize, categoryParentId) {
      classifyApi
        .pageInfo(pageNum, pageSize, categoryParentId)
        .then(response => {
          console.log(response.data.data);

          this.tableData = response.data.data.list;
          this.total = response.data.data.total;
        });
    }
  },
  mounted() {
    this.intdata(this.currentPage1, this.pageSize, this.categoryParentId);
    
   
   
  }
};
</script>
<style scoped>
.common-home,
.content-header {
  border-bottom: 1px solid #e4e4e4;
  position: relative;
}
.common-home > div {
  display: inline-block;
  width: 100px;
  height: 50px;
  vertical-align: top;
  text-align: center;
  line-height: 50px;
  color: #666666;
}
.common-home > .refresh {
  position: absolute;
  right: 10px;
}
.common-home > div > span {
  border: 4px solid #0399fe;
  display: inline-block;
  width: 0px;
  height: 15px;
  vertical-align: middle;
  margin-right: 5px;
  background-color: #0399fe;
}
.parent-body {
  border: 1px solid #e4e4e4;
}
.content-header {
  height: 50px;
  line-height: 50px;
  background-color: #f3f3f3;
  color: #666666;
  position: relative;
  text-align: left;
}
.info-main {
  background-color: #fff;
}

.content-header > div {
  display: inline-block;
}
.content-header > div:last-of-type {
  position: absolute;
  right: 10px;
}
.padding-style {
  padding: 0 !important;
}

.info-foot {
  background-color: #fdfdfe;
  height: 60px;
  line-height: 60px;
  position: relative;
}
.paging-style {
  position: absolute;
  right: 10px;
  display: inline-block;
  top: 15px;
}
</style>
